<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font: 700 30px/40px "kaiti";
            color: skyblue;
        }
        
        img {
            width: 200px;
            height: 200px;
            vertical-align: middle;
        }
        
        div {
            display: inline-block;
        }
        
        li,
        h1 {
            width: 500px;
            margin: 20px auto;
            margin-bottom: 20px;
        }
        
        input {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <ul>
        <!-- <li>
            <input type="checkbox">
            <img src="https://img1.baidu.com/it/u=4155729167,2523786705&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
            <div>
                <p>小米10</p>
                <p>5000</p>
            </div>
        </li> -->
    </ul>
    <h1></h1>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script>
        // 练习1： 有已知已下购物车数据， 每一个都选中了， 则返回的全选状态为true（ 选中了）， 只要有一个没有选中则返回false(未选中了)
        var cartGoods = [{
            src: 'https://img1.baidu.com/it/u=4155729167,2523786705&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            goodsname: '小米10',
            price: 5000,
            isChecked: true, //代表是否选中了
        }, {
            src: 'https://img2.baidu.com/it/u=3927108274,818709055&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            goodsname: '苹果10',
            price: 3000,
            isChecked: false, //代表是否选中了
        }];
        $.each(cartGoods, function(index, val) {
            $('ul').append(`
            <li>
                <input type="checkbox">
                <img src="${val.src}" alt="">
                <div>
                    <p>${val.goodsname}</p>
                    <p>${val.price}</p>
                </div>
            </li>
            `)
        })
        $('ul').on('click', 'input', function() {
            if ($(':checkbox:checked').length == $(':checkbox').length) {
                $('h1').text('恭喜你，你全选了');
            } else {
                $('h1').text('你还没有全选');
            }

        });
    </script>
</body>

</html>